<template>
    <view class="login-container">
        <view class="login-wrapper">
            <!-- Logo 和标题 -->
            <view class="login-header">
                <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
                <text class="title fs-36">Re-Life 鼻咽康</text>
                <text class="subtitle fs-26 c-6">专业康复，科学训练</text>
            </view>

            <!-- 登录表单 -->
            <view class="login-form">
                <view class="form-item">
                    <view class="form-label">
                        <uni-icons type="person" color="#3b82f6" size="20"></uni-icons>
                        <text class="ml-10 fs-28">姓名</text>
                    </view>
                    <input
                        class="form-input fs-30"
                        type="text"
                        v-model="loginForm.user_name"
                        placeholder="请输入您的姓名"
                        placeholder-class="input-placeholder"
                    />
                </view>

                <view class="form-item">
                    <view class="form-label">
                        <uni-icons type="phone" color="#3b82f6" size="20"></uni-icons>
                        <text class="ml-10 fs-28">手机号</text>
                    </view>
                    <input
                        class="form-input fs-30"
                        type="number"
                        v-model="loginForm.user_mobile"
                        placeholder="请输入手机号"
                        maxlength="11"
                        placeholder-class="input-placeholder"
                    />
                </view>

                <!-- 登录按钮 -->
                <button class="login-btn" @click="handleLogin" :disabled="isLoading">
                    <text v-if="!isLoading">登录</text>
                    <text v-else>登录中...</text>
                </button>
            </view>

            <!-- 装饰图案 -->
            <view class="decoration-circle circle-1"></view>
            <view class="decoration-circle circle-2"></view>
            <view class="decoration-circle circle-3"></view>
        </view>
    </view>
</template>

<script>
import { accountLogin } from '@/api/modules/common.js';
import useUserStore from '@/stores/modules/user.js';

export default {
    data() {
        return {
            loginForm: {
                user_name: '刘康',
                user_mobile: '15178809747'
            },
            isLoading: false
        };
    },
    methods: {
        // 验证表单
        validateForm() {
            if (!this.loginForm.user_name || !this.loginForm.user_name.trim()) {
                uni.showToast({
                    title: '请输入姓名',
                    icon: 'none'
                });
                return false;
            }

            if (!this.loginForm.user_mobile || !this.loginForm.user_mobile.trim()) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                });
                return false;
            }

            // 验证手机号格式
            const mobileReg = /^1[3-9]\d{9}$/;
            if (!mobileReg.test(this.loginForm.user_mobile)) {
                uni.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none'
                });
                return false;
            }

            return true;
        },

        // 处理登录
        async handleLogin() {
            if (!this.validateForm()) return;

            if (this.isLoading) return;

            try {
                this.isLoading = true;
                uni.showLoading({ title: '登录中...' });

                const { data } = await accountLogin({
                    user_name: this.loginForm.user_name.trim(),
                    user_mobile: this.loginForm.user_mobile.trim()
                });

                // 保存用户信息
                const user_store = useUserStore();
                user_store.modifyUserData(data);

                uni.showToast({
                    title: '登录成功',
                    icon: 'success'
                });

                // 延迟跳转到首页
                setTimeout(() => {
                    uni.switchTab({
                        url: '/pages/index/index'
                    });
                }, 1000);
            } catch (err) {
                console.error('登录失败', err);
                uni.showToast({
                    title: err?.msg || '登录失败，请重试',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
                this.isLoading = false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 100vh;
}

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    position: relative;
    overflow: hidden;
}

.login-wrapper {
    width: 100%;
    max-width: 600rpx;
    background-color: #fff;
    border-radius: 40rpx;
    padding: 60rpx 40rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 10;
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;

    .logo {
        width: 120rpx;
        height: 120rpx;
        margin-bottom: 30rpx;
        border: none !important;
        outline: none !important;
        background: transparent;
        display: block;
        padding: 0;
        box-shadow: none;
        overflow: hidden;
        border-radius: 50%;
    }

    .title {
        color: #333;
        margin-bottom: 10rpx;
    }

    .subtitle {
        color: #666;
    }
}

.login-form {
    .form-item {
        margin-bottom: 40rpx;

        .form-label {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            color: #333;
        }

        .form-input {
            width: 100%;
            height: 80rpx;
            background-color: #f5f7fa;
            border-radius: 20rpx;
            padding: 0 30rpx;
            color: #333;
            border: 2rpx solid transparent;
            transition: all 0.3s;
            box-sizing: border-box;

            &:focus {
                background-color: #fff;
                border-color: #3b82f6;
            }
        }
    }

    .login-btn {
        width: 100%;
        height: 90rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border-radius: 50rpx;
        font-size: 32rpx;
        font-weight: 500;
        border: none;
        margin-top: 40rpx;
        box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.3);

        &:active {
            opacity: 0.9;
        }

        &[disabled] {
            opacity: 0.6;
        }
    }
}

// 装饰圆圈
.decoration-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 1;
}

.circle-1 {
    width: 300rpx;
    height: 300rpx;
    background: #fff;
    top: -100rpx;
    right: -100rpx;
}

.circle-2 {
    width: 200rpx;
    height: 200rpx;
    background: #fff;
    bottom: 100rpx;
    left: -50rpx;
}

.circle-3 {
    width: 150rpx;
    height: 150rpx;
    background: #fff;
    top: 50%;
    right: 50rpx;
}
</style>
